<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>系统监控</title>
    <link rel="stylesheet" type="text/css" th:href="@{/plugins/layui/css/layui.css}"/>
    <style>
        .echart-div {
            height: 400px;
            width: 400px;
            /* 水平垂直居中 */
            margin: auto;
        }
    </style>
</head>
<body>
<div class="layui-main" style="width: 100%;">
    <div class="layui-bg-gray" style="padding: 16px;">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md4">
                <div class="layui-card">
                    <div class="layui-card-header"><i class="layui-icon layui-icon-senior"></i> 内存监控</div>
                    <div class="layui-card-body">
                        <div class="echart-div" id="mem_pie"></div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-card">
                    <div class="layui-card-header"><i class="layui-icon layui-icon-app"></i> JVM内存监控</div>
                    <div class="layui-card-body">
                        <div class="echart-div" id="jvm_pie"></div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-card">
                    <div class="layui-card-header"><i class="layui-icon layui-icon-shrink-right"></i> CPU</div>
                    <div class="layui-card-body">
                        <div class="echart-div" id="cpu_pie"></div>
                    </div>
                </div>
            </div>
        </div>
        <!--服务器信息-->
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header"><i class="layui-icon layui-icon-chart-screen"></i> 服务器信息</div>
                    <div class="layui-card-body">
                        <table class="layui-table" lay-skin="line">
                            <tbody id="sys-info">
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        </div>
        <!--Java虚拟机信息-->
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header"><i class="layui-icon layui-icon-engine"></i> Java虚拟机信息</div>
                    <div class="layui-card-body">
                        <table class="layui-table" lay-skin="line">
                            <tbody id="java-jvm-info">
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" th:src="@{/plugins/layui/layui.js}"></script>
<script type="text/javascript" th:src="@{/javascript/jquery-2.1.4.js}"></script>
<script type="text/javascript" th:src="@{/plugins/echart/echarts.min.js}"></script>
<script>
    $(function () {
        MONITOR.init();
    })

    /**
     * 图表
     */
    var MONITOR = {
        init: () => {
            // 通过接口获取动态数据
            get('/monitor', null, res => {
                console.log(res)
                // 系统内存
                MONITOR.loadMem(res.mem);
                // jvm内存
                MONITOR.loadJvmMem(res.jvm);
                // CPU
                MONITOR.loadCpu(res.cpu);
                // 系统信息
                MONITOR.loadSysInfo(res.sys);
                // 项目路径
                MONITOR.loadJvmInfo(res.jvm);
            }, error => {
                console.error("获取数据异常:", error)
            })
        },
        /**
         * 加载系统内存监控
         */
        loadMem: (mem) => {
            let data = [
                {
                    name: '已用内存', value: (mem.used / mem.total) * 100,
                },
                {
                    name: '剩余内存', value: (mem.free / mem.total) * 100,
                }
            ]
            var chartDom = document.getElementById('mem_pie');
            var myChart = echarts.init(chartDom);
            let option = {
                title: {
                    text: '内存',
                    subtext: '系统内存' + mem.total + 'G',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: '内存使用情况',
                        type: 'pie',
                        radius: '50%',
                        data: data,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            myChart.setOption(option);
        },
        /**
         * 加载JVM监控
         * @param jvm
         */
        loadJvmMem: (jvm) => {
            let data = [
                {
                    name: '已用内存', value: jvm.used,
                },
                {
                    name: '剩余内存', value: jvm.total - jvm.used,
                }
            ]
            var chartDom = document.getElementById('jvm_pie');
            var myChart = echarts.init(chartDom);
            let option = {
                title: {
                    text: 'JVM内存',
                    subtext: '总内存' + jvm.total + 'M',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: '内存使用情况',
                        type: 'pie',
                        radius: '50%',
                        data: data,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            myChart.setOption(option);
        },
        /**
         * 加载CPU信息
         * @param cpu
         */
        loadCpu: (cpu) => {
            let data = [
                {
                    name: '用户使用率', value: cpu.used,
                },
                {
                    name: '系统使用率', value: cpu.sys,
                },
                {
                    name: '当前空闲率', value: cpu.free,
                }
            ]
            var chartDom = document.getElementById('cpu_pie');
            var myChart = echarts.init(chartDom);
            let option = {
                title: {
                    text: '内存',
                    subtext: '监控',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: '内存使用情况',
                        type: 'pie',
                        radius: '50%',
                        data: data,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            myChart.setOption(option);
        },
        /**
         * 加载系统信息
         */
        loadSysInfo: (sysInfo) => {
            console.log(sysInfo)
            var infoHtml = '<tr>\n' +
                '                                <td>服务器名称</td>\n' +
                '                                <td>' + sysInfo.computerName + '<td>\n' +
                '                            </tr>';
            infoHtml += '<tr>\n' +
                '                                <td>服务器IP</td>\n' +
                '                                <td>' + sysInfo.computerIp + '<td>\n' +
                '                            </tr>';

            infoHtml += '<tr>\n' +
                '                                <td>服务器操作系统</td>\n' +
                '                                <td>' + sysInfo.osName + '<td>\n' +
                '                            </tr>';
            infoHtml += '<tr>\n' +
                '                                <td>系统架构</td>\n' +
                '                                <td>' + sysInfo.osArch + '<td>\n' +
                '                            </tr>';
            $('#sys-info').html(infoHtml)
        },
        /**
         * 加载Java虚拟机信息
         */
        loadJvmInfo: (javaJvmInfo) => {
            var jvmInfoHtml = '<tr>\n' +
                '                                <td>Java名称</td>\n' +
                '                                <td>' + javaJvmInfo.name + '<td>\n' +
                '                            </tr>';
            jvmInfoHtml += '<tr>\n' +
                '                                <td>Java版本</td>\n' +
                '                                <td>' + javaJvmInfo.version + '<td>\n' +
                '                            </tr>';

            jvmInfoHtml += '<tr>\n' +
                '                                <td>启动时间</td>\n' +
                '                                <td>' + javaJvmInfo.startTime + '<td>\n' +
                '                            </tr>';
            jvmInfoHtml += '<tr>\n' +
                '                                <td>安装路径</td>\n' +
                '                                <td>' + javaJvmInfo.home + '<td>\n' +
                '                            </tr>';
            jvmInfoHtml += '<tr>\n' +
                '                                <td>运行时长</td>\n' +
                '                                <td>' + javaJvmInfo.runTime + '<td>\n' +
                '                            </tr>';
            $('#java-jvm-info').html(jvmInfoHtml)
        }
    }

    /**
     * get请求
     * @param url
     * @param data
     * @param success
     * @param error
     */
    function get(url, data, success, error, async = true) {
        $.ajax({
            url: url,
            data: data,
            async: async,
            dataType: 'json',
            method: 'get',
            success: success,
            error: error
        })
    }
</script>
